#@layout()
#define css()

#end
#define main()
<body style="background-color: rgb(45,96,242);width: 100%;height: 100%">
<div id="app">
    <template>
        <el-header>
            <el-row style="top: 20px;">
                <el-col span="5" offset="2" style="top:0">
                    <h2 style="margin-top: 0;color: #ffffff;">自动化授权系统</h2>
                </el-col>
            </el-row>
        </el-header>
        <el-card style="width:350px;margin:0 auto;margin-top: 200px;padding: 10px;">
            <div style="font-size: 20px;color: #1755f8;text-align: center;line-height: 55px;">
                登录系统
            </div>
            <el-form ref="form" :model="form" label-width="80px" label-position="top">
                <el-form-item>
                    <el-input placeholder="用户名" v-model="form.phone"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input type="password" placeholder="密码" v-model="form.password"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-row>
                        <el-col span="13">
                            <el-input placeholder="验证码" v-model="form.captcha"></el-input>
                        </el-col>
                        <el-col span="10" offset="1">
                            <el-image :src="captcha_image"
                                      @click="captcha_image='/image/captcha?'+Math.random()"></el-image>
                        </el-col>
                    </el-row>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="login" style="width: 100%;background-color: rgb(20,69,198)">登录
                    </el-button>
                </el-form-item>
            </el-form>

        </el-card>
    </template>
</div>
</body>
#end
#define script()
<script>
    var vm = new Vue({
            el: '#app',
            data: function () {
                return {
                    form: {
                        phone: '',
                        password: '',
                        captcha: ''
                    },
                    captcha_image: '/image/captcha'
                }
            },
            watch: {},
            methods: {
                login() {
                    var vm = this;
                    axios.post("/user/loginValidate?captcha=" + this.form.captcha, this.form
                    ).then(function (response) {
                        if (response.data.code != 200) {
                            vm.$message(response.data.mess);
                            vm.captcha_image = '/image/captcha?' + Math.random();
                        } else {
                            // vm.$message(response.data.data);
                            window.location.href = response.data.data;
                        }
                    })
                }
            },
            mounted: function () {

            }
        }
    )
</script>

#end